<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript">



    window.onload = () => {
        /**
         DOM acid操作
         1.appendChild()
         2.insertBefore()
         3.removeChild()
         4.replaceChild()
        */
        let city = document.getElementById("city");
        let prev_add_button = document.getElementById("prev_add");
        prev_add_button.onclick = () => {
            let li = document.createElement("li");
            li.innerHTML = "首尔";
            city.insertBefore(li, city.firstChild);
        }
        let next_add_button = document.getElementById("next_add");
        next_add_button.onclick = () => {
            let li = document.createElement("li");
            li.innerHTML = "东京";
            city.appendChild(li);
        }
        let prev_remove_button = document.getElementById("prev_remove");
        prev_remove_button.onclick = () => {
            city.removeChild(city.firstChild);
        }
        let next_remove_button = document.getElementById("next_remove");
        next_remove_button.onclick = () => {
            city.removeChild(city.lastChild);
        }
        let insert_button = document.getElementById("insert");
        insert_button.onclick = () => {
            let li = document.createElement("li");
            li.innerHTML = "杭州";
            let gz = document.getElementById("gz");
            city.insertBefore(li, gz);
        }
        let delete_button = document.getElementById("delete");
        delete_button.onclick = () => {
            let bj = document.getElementById("bj");
            //city.removeChild(bj);
            if (bj != null) {
                bj.parentNode.removeChild(bj);
            }
        }

        let employTable = document.getElementById("employ");

        let delete_button_list = employTable.getElementsByTagName("button");
        for (let i = 0; i < delete_button_list.length; i++) {
            delete_button_list[i].onclick = function() { 
                console.log(this);
                //箭头函数中的this指向上下文中的this
                if (this.id != "add") {
                    let tr = this.parentNode.parentNode;
                    tr.parentNode.removeChild(tr);
                }
            }
        }

        let add_button = document.getElementById("add");
        add_button.onclick = () => {
            let name = document.getElementById("name").value;
            let age = document.getElementById("age").value;
            let sex = document.getElementById("sex").value;
            let tr = document.createElement("tr");
            let td_name = document.createElement("td");
            td_name.innerHTML = name;
            let td_age = document.createElement("td");
            td_age.innerHTML = age;
            let td_sex = document.createElement("td");
            td_sex.innerHTML = sex;
            let td_button = document.createElement("td");
            let button = document.createElement("button");
            button.innerHTML = "删除";
            button.onclick = () => {
                let tr = button.parentNode.parentNode;
                tr.parentNode.removeChild(tr);
            }
            td_button.appendChild(button);
            console.log(add_button.parentElement.parentElement);
            let tr_add = document.createElement("tr");
            tr_add.appendChild(td_name);
            tr_add.appendChild(td_sex);
            tr_add.appendChild(td_age);
            tr_add.appendChild(td_button);
            add_button.parentElement.parentElement.parentNode.insertBefore(tr_add,add_button.parentElement.parentElement);

        }


    }

</script>

<body>
    <div id="list">
        <ul id="city">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="gz">广州</li>
            <li id="sz">深圳</li>
        </ul>
    </div>
    <div id="button">
        <button id="prev_add">向前插入</button>
        <button id="next_add">向后插入</button>
        <button id="prev_remove">向前删除</button>
        <button id="next_remove">向后删除</button>
        <button id="insert">广州前插入</button>
        <button id="delete">北京删除</button>
    </div>

    <p></p>

    <div id="employTable">
        <div id="result">
            <table id="employ" border="1">
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>acid操作</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>20</td>
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>女</td>
                    <td>18</td>
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>男</td>
                    <td>22</td>
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td>赵六</td>
                    <td>女</td>
                    <td>19</td>
                    <td><button>删除</button></td>
                </tr>
                <!-- 自定义添加信息 -->
                <tr>
                    <td><input type="text" id="name"></td>
                    <td><input type="text" id="sex"></td>
                    <td><input type="text" id="age"></td>
                    <td><button id="add">添加</button></td>
                </tr>
            </table>
        </div>

    </div>
</body>

</html>